<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="" />
      </div>
      <span class="logo">
        <img :src="logoSrc" alt="" />
      </span>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme" />
        <span class="datetime">2049-10-01 08:00:00</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div
          id="left-top"
          style="height: 50%; margin-bottom: 5%"
          :class="[fullScreenStatic.trend ? 'fullscreen' : '']"
        >
          <!-- 销量趋势图表 -->
          <Trend ref="trend"></Trend>
          <div class="resize" @click="fullScreen('trend')">
            <span class="iconfnot">
              <img :src="iconSrc" alt="" :style="fullSize" />
            </span>
          </div>
        </div>
        <div
          id="left-bottom"
          style="height: 35%"
          :class="[fullScreenStatic.seller ? 'fullscreen' : '']"
        >
          <!-- 商家销售金额图表 -->
          <Seller ref="seller"></Seller>
          <div class="resize" @click="fullScreen('seller')">
            <span class="iconfnot">
              <img :src="iconSrc" alt="" :style="fullSize" />
            </span>
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div
          id="middle-top"
          style="height: 55%; margin-bottom: 3%"
          :class="[fullScreenStatic.map ? 'fullscreen' : '']"
        >
          <!-- 商家分布图表 -->
          <Map ref="map"></Map>
          <div class="resize" @click="fullScreen('map')">
            <span class="iconfnot">
              <img :src="iconSrc" alt="" :style="fullSize" />
            </span>
          </div>
        </div>
        <div
          id="middle-bottom"
          style="height: 30%"
          :class="[fullScreenStatic.rank ? 'fullscreen' : '']"
        >
          <!-- 地区销量排行图表 -->
          <Rank ref="rank"></Rank>
          <div class="resize" @click="fullScreen('rank')">
            <span class="iconfnot">
              <img :src="iconSrc" alt="" :style="fullSize" />
            </span>
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div
          id="right-top"
          style="height: 50%; margin-bottom: 5%"
          :class="[fullScreenStatic.hot ? 'fullscreen' : '']"
        >
          <!-- 热销商品占比图表 -->
          <Hot ref="hot"></Hot>
          <div class="resize" @click="fullScreen('hot')">
            <span class="iconfnot">
              <img :src="iconSrc" alt="" :style="fullSize" />
            </span>
          </div>
        </div>
        <div
          id="right-bottom"
          style="height: 35%"
          :class="[fullScreenStatic.stock ? 'fullscreen' : '']"
        >
          <!-- 库存销量分析图表 -->
          <Stock ref="stock"></Stock>
          <div class="resize" @click="fullScreen('stock')">
            <span class="iconfnot">
              <img :src="iconSrc" alt="" :style="fullSize" />
            </span>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>


<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import《组件名称》from'《组件路径》';
import Hot from "@/components/Hot.vue";
import Map from "@/components/Map.vue";
import Rank from "@/components/Rank.vue";
import Seller from "@/components/Seller.vue";
import Stock from "@/components/Stock.vue";
import Trend from "@/components/Trend.vue";
import { getThemeValue } from "@/utils/theme_utils.js";
import { mapState } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Trend,
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend,
  },
  props: {},
  data() {
    //这里存放数据
    return {
      chartEntity: null,
      allData: null,
      full: "/static/img/full-screen-two-w.svg",
      fullSize: "width: 50%",
      fullScreenStatic: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false,
      },
      fullFlag: false,
      dakr: false,
    };
  },
  //计算属性:类似于data概念,有缓存效果,用于不经常修改的数据
  computed: {
    logoSrc() {
      return "/static/img/" + getThemeValue(this.theme).logoSrc;
    },
    headerSrc() {
      return "/static/img/" + getThemeValue(this.theme).headerSrc;
    },
    themeSrc() {
      return "/static/img/" + getThemeValue(this.theme).themeSrc;
    },
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor,
      };
    },
    iconSrc() {
      return this.full;
    },
    ...mapState(["theme"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    fullScreen(chart) {
      let targetValue = !this.fullScreenStatic[chart];
      this.$socket.send({
        action: "fullScreen",
        socketType: "fullScreen",
        chartName: chart,
        value: targetValue,
      });
    },
    // 全屏
    recvData(data) {
      let chart = data.chartName;
      // this.fullSize = this.fullFlag ? "width: 100%" : "width: 50%";
      this.changeIcon();
      this.fullScreenStatic[chart] = !this.fullScreenStatic[chart];
      // 更新完数据再全屏
      this.$nextTick(() => {
        this.$refs[chart].screenAdapter();
      });
    },
    // 主题同步切换
    handleChangeTheme() {
      this.dakr = !this.dakr;
      this.changeIcon();

      this.$socket.send({
        action: "themeChange",
        socketType: "themeChange",
        chartName: "",
        value: this.full,
      });
    },
    changeIcon() {
      this.fullFlag = !this.fullFlag;
      // 先判断皮肤
      if (this.dakr) {
        // 然后再判断是否是全屏模式下; 全屏缩小, 小屏放大
        if (this.fullFlag) {
          this.full = "/static/img/full-screen-two-b.svg";
        } else {
          this.full = "/static/img/off-screen-two-b.svg";
        }
      } else {
        if (this.fullFlag) {
          this.full = "/static/img/off-screen-two-w.svg";
        } else {
          this.full = "/static/img/full-screen-two-w.svg";
        }
      }
    },
    recvThemeChange(data) {
      this.$store.commit("changeTheme");
    },
  },
  beforeCreate() {}, //生命周期-创建之前
  created() {
    // 点击事件后, 在这里拿数据
    this.$socket.registerCallBack("fullScreen", this.recvData);
    this.$socket.registerCallBack("themeChange", this.recvThemeChange);
  }, //生命周期-创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期-挂载之前
  mounted() {
    // this.initChart();
    // this.getData();
    // 不要在函数中加(), 否则只会调用一次
    // window.addEventListener("resize", this.screenAdapter);
    // 加载完成后自动适配分辨率
    // this.screenAdapter();
  }, //生命周期-挂载完成（可以访问DOM元素）
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {
    this.$socket.unRegisterCallBack("fullScreen");
    this.$socket.unRegisterCallBack("themeChange");
  }, //生命周期-销毁完成
};
</script>

<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 0px;
  top: 20px;
  cursor: pointer;
}
</style>
